<!-- sections/whats-in-the-box.liquid -->
<section class="whats-in-the-box">
  <div class="container">
    <h2 class="box-title">{{ section.settings.title }}</h2>
    <div class="swiper whats-box-slider custom-swiper">
      <div class="swiper-wrapper">
        {% for block in section.blocks %}
          <div class="swiper-slide box-item">
            <div class="box-image">
              <img src="{{ block.settings.image | image_url: width: 400 }}" alt="{{ block.settings.label | escape }}">
            </div>
            <p class="box-label">{{ block.settings.label }}</p>
          </div>
        {% endfor %}
      </div>
      <!-- Custom Navigation buttons -->
      <div class="custom-button-prev custom-arrow">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M15 6l-6 6 6 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="custom-button-next custom-arrow">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M9 6l6 6-6 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
  </div>
</section>
<!-- Swiper CSS & JS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Swiper('.custom-swiper', {
      slidesPerView: 3,
      spaceBetween: 20,
      navigation: {
        nextEl: '.custom-button-next',
        prevEl: '.custom-button-prev',
      },
      breakpoints: {
        640: { slidesPerView: 3 },
        768: { slidesPerView: 1 },
        1024: { slidesPerView: 5 },
      }
    });
  });
</script>

<style>
  .whats-in-the-box {
    padding: 40px 0;
    text-align: center;
    position: relative;
  }
  .whats-in-the-box .container {
    max-width: 1352px;
    margin: 0 auto;
    padding: 0;
  }
  .whats-in-the-box .container .whats-box-slider{
    padding:0;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .box-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 30px;
  }

  .swiper.whats-box-slider {
    padding: 10px;
    position: relative;
  }

  .box-item {
    text-align: center;
  }

  .box-image img {
    width: 100%;
    max-width: 120px;
    margin: 0 auto;
    border-radius: 10px;
  }

  .box-label {
    margin-top: 10px;
    font-size: 0.95rem;
    color: #333;
  }

  /* Custom arrow buttons scoped only to this swiper */
  .custom-swiper .custom-button-next,
  .custom-swiper .custom-button-prev {
    width: 40px;
    height: 40px;
    background-color: white;
    color: #000;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 10;
    cursor: pointer;
  }

  .custom-swiper .custom-button-prev {
    left: 13px;
  }

  .custom-swiper .custom-button-next {
    right: 20px;
  }

  .custom-swiper .custom-arrow svg {
    width: 20px;
    height: 20px;
  }

  /* Hide default swiper arrows only inside this swiper */
  .custom-swiper .swiper-button-next::after,
  .custom-swiper .swiper-button-prev::after {
    display: none !important;
  }
  .kik-gallery .whats-in-the-box .box-title{
    margin-bottom: 22px;
  }
  .kik-gallery .whats-in-the-box .whats-box-slider .swiper-wrapper .swiper-slide .box-image img{
    width: 100%;
    max-width: 100%;
    object-fit: cover;
  }
  .kik-gallery .whats-in-the-box .whats-box-slider .swiper-wrapper .swiper-slide .box-label{
    margin-top: 8px;
    margin-bottom: 0;
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0px;
  }
  .kik-gallery .whats-in-the-box .whats-box-slider .swiper-wrapper{
    padding-right: 2.5rem;  
  }
  .kik-gallery .whats-in-the-box .whats-box-slider .swiper-button-disabled{
    display: none;
  }
  .kik-gallery .whats-in-the-box .whats-box-slider .custom-arrow{
    background: rgba(201, 201, 201,0.8);
    width:40px;
    height:40px;
  }
  .kik-gallery .whats-in-the-box .whats-box-slider .custom-arrow svg path{
    stroke: #fff;
  }
  .kik-gallery .whats-in-the-box .whats-box-slider .custom-arrow.custom-button-next{
    right: -22px;
  }
  @media (min-width: 768px) {   
    .box-image img {
      max-width: 150px;
    }    
  }
  @media(max-width:768px){
    .whats-in-the-box .container .whats-box-slider{
      margin-left:16px;
      margin-right:0px;
      padding-right: 16px;
    }
    .kik-gallery .whats-in-the-box .whats-box-slider .custom-arrow.custom-button-next{
      right:25px;
    }
    .kik-gallery .whats-in-the-box .box-title{
      font-weight: 700;
      font-size: 40px;
      line-height: 120%;
      letter-spacing: 0px;
      text-align: center;
      margin-bottom: 32px;
      padding-right: 16px;
      padding-left: 16px;
    }
    .kik-gallery .whats-in-the-box .whats-box-slider .swiper-wrapper .swiper-slide{
      width: 65% !important;
      max-width: 100% !important;
      margin-right: 10px !important;
    }
    .kik-gallery .whats-in-the-box .whats-box-slider .swiper-wrapper .swiper-slide .box-label{
      font-weight: 400;
      font-size: 14px;
      line-height: 150%;
      letter-spacing: 0px;
    }
  }
</style>

{% schema %}
{
  "name": "What's in the Box",
  "class": "kik-gallery",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "What's in the Box"
    }
  ],
  "blocks": [
    {
      "type": "box_item",
      "name": "Box Item",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Item Image"
        },
        {
          "type": "text",
          "id": "label",
          "label": "Item Label"
        }
      ]
    }
  ],
  "max_blocks": 10,
  "presets": [
    {
      "name": "What's in the Box",
      "category": "Product"
    }
  ]
}
{% endschema %}
